@charset "UTF-8";
@import "./footer.scss";
@import "./iconfont.scss";
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

.animate__flipInY {
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

.animate__heartBeat {
    animation-iteration-count: infinite;
}

.web {
    header {
        display: flex;
        justify-content: space-between;
        span {
            width: 5.69vw;
            margin-top: 1.46vw;
            margin-left: 2.78vw;
        }
        nav {
            ul {
                padding: 2.57vw;
                li {
                    margin: 0 5vw;
                    display: inline-block;
                    a {
                        font-size: 1.39vw;
                        line-height: 1.32vw;
                        color: #000000;
                    }
                    p {
                        font-size: 1.18vw;
                        line-height: 1.32vw;
                        color: #838383;
                    }
                }
                span {
                    position: relative;
                    img {
                        position: absolute;
                        top: -1.5vw;
                        right: .5vw;
                    }
                }
                li:hover {
                    transform: rotate(720deg);
                    transition: all 0.3s;
                }
                li:hover a {
                    color: #13b5a8;
                }
            }
        }
    }
    main {
        .bigBox {
            position: relative;
            span {
                position: absolute;
                top: -1vw;
                left: 14vw;
                z-index: 5;
                img {
                    width: 18vw;
                    height: 38vw;
                }
            }
            .white {
                margin-bottom: 5vw;
                .box {
                    margin-left: 18vw;
                    .small {
                        width: 3vw;
                        height: 1vw;
                        background-color: #ffd205;
                    }
                    h1 {
                        text-align: center;
                        font-size: 2vw;
                        font-weight: normal;
                        letter-spacing: 0vw;
                        color: #000000;
                    }
                    p {
                        margin: 2vw auto 3vw;
                        width: 35vw;
                        font-size: 1vw;
                        font-weight: normal;
                        color: #535556;
                    }
                    ul {
                        text-align: center;
                        li {
                            margin: 0.5vw;
                            display: inline-block;
                            text-align: center;
                            width: 6vw;
                            height: 2vw;
                            border-radius: 2vw;
                            border: 1px solid #000000;
                            a {
                                font-size: 1vw;
                                line-height: 0vw;
                                letter-spacing: 0vw;
                                color: #0c595a;
                            }
                        }
                        li:hover {
                            transform: rotate(360deg);
                            background-color: #08cacc;
                            transition: all 0.5s;
                        }
                        li:hover a {
                            color: #fff;
                        }
                    }
                }
            }
            .blue {
                position: relative;
                text-align: center;
                width: 100%;
                height: 22vw;
                background-color: #08cacc;
                .time {
                    top: 0vw;
                    left: 11.5vw;
                    position: relative;
                    margin-top: 4vw;
                    display: inline-block;
                    a {
                        .yuan {
                            margin: 2.5vw;
                            text-align: center;
                            line-height: 6vw;
                            width: 6vw;
                            height: 6vw;
                            border: 1px solid #fff;
                            border-radius: 6vw;
                        }
                        i {
                            color: #fff;
                            font-size: 3vw;
                        }
                        p {
                            font-size: 1vw;
                            font-weight: normal;
                            color: #ffffff;
                        }
                    }
                }
                .time:hover {
                    transform: scale(1.2);
                    transition: all 0.3s;
                }
            }
        }
        .use {
            margin-top: 6vw;
            margin-bottom: 3vw;
            text-align: center;
            .small {
                border-radius: 1vw;
                margin: 0vw auto;
                width: 3vw;
                height: 1vw;
                background-color: #ffd205;
            }
            h1 {
                margin-top: 1vw;
                font-size: 2vw;
                font-weight: normal;
                color: #000000;
            }
            h6 {
                margin-top: 0.5vw;
                margin-bottom: 3vw;
                font-size: 1vw;
                font-weight: normal;
                font-stretch: normal;
                line-height: 1vw;
                color: #000000;
            }
            .way {
                .choice {
                    display: inline-block;
                    a {
                        margin: 5vw;
                    }
                    h3 {
                        margin-top: 3vw;
                        margin-bottom: 1vw;
                        font-size: 2vw;
                        font-weight: normal;
                        color: #000000;
                    }
                    p {
                        font-size: 1vw;
                        color: #939597;
                    }
                }
                .choice:hover {
                    transform: scale(1.2);
                }
                .choice:nth-child(2) img {
                    margin-left: 3.5vw;
                }
            }
        }
    }
}